<template>
  <div class="app-container">
  <div class="hearContent">
    <span>企业入会表单设置</span>
  </div>
  <el-row style="text-align:center">
     <el-form :model="form" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
       <el-form-item label="申请开关">
          <el-switch  v-model="form.companyStatus"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleMeetingStatusChange(form)"></el-switch>
      
       </el-form-item>
      </el-row>
       <el-row>
        <el-form-item label="入会说明" >
      <editor v-model="form.content" :min-height="282" style="width:450px"/>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="企业名称" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="您的姓名" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="您的性别" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="您的职务" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
       <el-row>
        <el-form-item label="联系电话" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="电子邮箱" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="所属行业" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="公司地址" >
      <el-input v-model="form.name" style="width:450px" :disabled="true"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="相关附件" disabled="true">
      <el-input v-model="form.name" style="width:450px"></el-input>
      </el-form-item>
      </el-row>
      <el-row>
       <el-form-item>
      <el-button type="primary" @click="handleAdd">新增字段</el-button>
    <el-button type="primary" @click="handleAdd">立即创建</el-button>
  </el-form-item>
      </el-row>
    </el-form>
  </el-row>
    <!-- 添加或修改微信小程序配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="协会id" prop="asId">
          <el-input v-model="form.asId" placeholder="请输入协会id" />
        </el-form-item>
        <el-form-item label="appid" prop="appId">
          <el-input v-model="form.appId" placeholder="请输入appid" />
        </el-form-item>
        <el-form-item label="appSecret" prop="appSecret">
          <el-input v-model="form.appSecret" placeholder="请输入appSecret" />
        </el-form-item>
        <el-form-item label="主题颜色" prop="color">
          <el-input v-model="form.color" placeholder="请输入主题颜色" />
        </el-form-item>
        <el-form-item label="公众号二维码图片地址" prop="codeUrl">
          <el-input v-model="form.codeUrl" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="协会图标地址" prop="iconUrl">
          <el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="首页标题" prop="pageTitle">
          <el-input v-model="form.pageTitle" placeholder="请输入首页标题" />
        </el-form-item>
        <el-form-item label="协会简介" prop="asTitle">
          <el-input v-model="form.asTitle" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="转发显示描述" prop="asDesc">
          <el-input v-model="form.asDesc" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="会费备注" prop="duesRemark">
          <el-input v-model="form.duesRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="移动办公名称" prop="officeName">
          <el-input v-model="form.officeName" placeholder="请输入移动办公名称" />
        </el-form-item>
        <el-form-item label="个人会员申请登记表地址(多个分号分隔;)" prop="fileUrlOne">
          <el-input v-model="form.fileUrlOne" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="企业会员申请登记表地址(多个分号分隔;)" prop="fileUrlTwo">
          <el-input v-model="form.fileUrlTwo" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="团体会员申请登记表地址(多个分号分隔;)" prop="fileUrlThree">
          <el-input v-model="form.fileUrlThree" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="会员认证提醒名称" prop="memberName">
          <el-input v-model="form.memberName" placeholder="请输入会员认证提醒名称" />
        </el-form-item>
        <el-form-item label="个人入会申请备注" prop="memberRemark">
          <el-input v-model="form.memberRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="企业入会申请备注" prop="companyRemark">
          <el-input v-model="form.companyRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="团体入会申请备注" prop="groupRemark">
          <el-input v-model="form.groupRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="首页海报开关：0关闭，1开启" prop="posterSwitch">
          <el-input v-model="form.posterSwitch" placeholder="请输入首页海报开关：0关闭，1开启" />
        </el-form-item>
        <el-form-item label="商城入口开关：0关闭，1开启" prop="storeSwitch">
          <el-input v-model="form.storeSwitch" placeholder="请输入商城入口开关：0关闭，1开启" />
        </el-form-item>
        <el-form-item label="商城入口地址" prop="shopLink">
          <el-input v-model="form.shopLink" placeholder="请输入商城入口地址" />
        </el-form-item>
        <el-form-item label="通讯录合并协会id 例：2;9" prop="contactsVisible">
          <el-input v-model="form.contactsVisible" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="通讯录合并过全部协会id 例：2;9" prop="contactsVisibleJoin">
          <el-input v-model="form.contactsVisibleJoin" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="上级工商联机构" prop="parentId">
          <el-input v-model="form.parentId" placeholder="请输入上级工商联机构" />
        </el-form-item>
        <el-form-item label="领导级值班名称" prop="leaderName">
          <el-input v-model="form.leaderName" placeholder="请输入领导级值班名称" />
        </el-form-item>
        <el-form-item label="会员级值班名称" prop="personnelName">
          <el-input v-model="form.personnelName" placeholder="请输入会员级值班名称" />
        </el-form-item>
        <el-form-item label="客服url" prop="customerUrl">
          <el-input v-model="form.customerUrl" placeholder="请输入客服url" />
        </el-form-item>
        <el-form-item label="入会申请按钮文本" prop="applyTip">
          <el-input v-model="form.applyTip" placeholder="请输入入会申请按钮文本" />
        </el-form-item>
        <el-form-item label="个人入会申请文本" prop="applyPersonTip">
          <el-input v-model="form.applyPersonTip" placeholder="请输入个人入会申请文本" />
        </el-form-item>
        <el-form-item label="企业入会申请文本" prop="applyCompanyTip">
          <el-input v-model="form.applyCompanyTip" placeholder="请输入企业入会申请文本" />
        </el-form-item>
        <el-form-item label="团体入会申请文本" prop="applyGroupTip">
          <el-input v-model="form.applyGroupTip" placeholder="请输入团体入会申请文本" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listWxconfig, getWxconfig, delWxconfig, addWxconfig, updateWxconfig } from "@/api/allocation/wxconfig";

export default {
  name: "Wxconfig",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 微信小程序配置表格数据
      wxconfigList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wechatType: null,
        asId: null,
        appId: null,
        appSecret: null,
        color: null,
        codeUrl: null,
        iconUrl: null,
        pageTitle: null,
        asTitle: null,
        asDesc: null,
        duesRemark: null,
        officeName: null,
        contactsStatus: null,
        personalStatus: null,
        groupStatus: null,
        companyStatus: null,
        fileUrlOne: null,
        fileUrlTwo: null,
        fileUrlThree: null,
        memberName: null,
        memberRemark: null,
        companyRemark: null,
        groupRemark: null,
        posterSwitch: null,
        storeSwitch: null,
        shopLink: null,
        contactsVisible: null,
        contactsVisibleJoin: null,
        parentId: null,
        leaderName: null,
        personnelName: null,
        status: null,
        customerUrl: null,
        applyTip: null,
        applyPersonTip: null,
        applyCompanyTip: null,
        applyGroupTip: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        wechatType: [
          { required: true, message: "公众号类型：1服务号，2订阅号不能为空", trigger: "change" }
        ],
        asId: [
          { required: true, message: "协会id不能为空", trigger: "blur" }
        ],
        officeName: [
          { required: true, message: "移动办公名称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询微信小程序配置列表 */
    getList() {
      this.loading = true;
      listWxconfig(this.queryParams).then(response => {
        this.wxconfigList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        wechatType: null,
        asId: null,
        appId: null,
        appSecret: null,
        color: null,
        codeUrl: null,
        iconUrl: null,
        pageTitle: null,
        asTitle: null,
        asDesc: null,
        duesRemark: null,
        officeName: null,
        contactsStatus: 0,
        personalStatus: 0,
        groupStatus: 0,
        companyStatus: 0,
        fileUrlOne: null,
        fileUrlTwo: null,
        fileUrlThree: null,
        memberName: null,
        memberRemark: null,
        companyRemark: null,
        groupRemark: null,
        posterSwitch: null,
        storeSwitch: null,
        shopLink: null,
        contactsVisible: null,
        contactsVisibleJoin: null,
        parentId: null,
        leaderName: null,
        personnelName: null,
        createTime: null,
        updateTime: null,
        status: 0,
        customerUrl: null,
        applyTip: null,
        applyPersonTip: null,
        applyCompanyTip: null,
        applyGroupTip: null
      };
      this.resetForm("form");
    },
      //设置开关状态 
     handleMeetingStatusChange(form) {
      let text = form.companyStatus === "1" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + form.id + '"公告吗？').then(function() {
        return changeMeetingStatus(form.id, form.companyStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        form.companyStatus = form.companyStatus === "1" ? "1" : "0";
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加微信小程序配置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getWxconfig(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改微信小程序配置";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateWxconfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWxconfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除微信小程序配置编号为"' + ids + '"的数据项？').then(function() {
        return delWxconfig(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('allocation/wxconfig/export', {
        ...this.queryParams
      }, `wxconfig_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.hearContent{
  height: 30px;
  box-shadow: 0 2px 40px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  text-align: center;
  line-height: 30px;
  margin: 10px 0px 20px 0px;
  background-color: aqua;
}
</style>
